// 基础用法
<template>
<p>引导用户按照流程完成任务的分步导航条， 可根据实际应用场景设定步骤，步骤不得少于 2 步。</p>
<p>简单的步骤条。</p>
<div text="sm" m="y-4" data-v-72294632=""><p>设置 <code>active</code> 属性，接受一个 <code>Number</code>，表明步骤的 index，从 0 开始。 需要定宽的步骤条时，设置 <code>space</code> 属性即可，它接受 <code>Number</code>， 单位为 <code>px</code>， 如果不设置，则为自适应。 设置 <code>finish-status</code> 属性可以改变已经完成的步骤的状态。</p>
</div>
  <el-steps style="max-width: 600px" :active="active" finish-status="success">
    <el-step title="Step 1" />
    <el-step title="Step 2" />
    <el-step title="Step 3" />
  </el-steps>

  <el-button style="margin-top: 12px" @click="next">Next step</el-button>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const active = ref(0)

const next = () => {
  if (active.value++ > 2) active.value = 0
}
</script>

<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>